import { useState, useEffect } from 'react';
import QRCode from 'qrcode.react';
import CommonLoading from '@/components/CommonLoading';
import { formatAmount } from '@/utils/utils.jsx';
import { getZxlDetailsOp } from '@/pages/AccountModule/periodList/service';
import styles from './index.module.less';
import { useMemo } from 'react';

const ZhiXinChain = () => {

  const [loading, setLoading] = useState(false);
  const [zxlDetail, setDetail] = useState({});

  useEffect(()=>{
   getZxlDetailsFunc(window.location.search.slice(4))
  },[])

    //至信链接口详情
    const getZxlDetailsFunc = async (id) => {
      setLoading(true);
      const { data, success } = await getZxlDetailsOp({ id });
      if(success){
        setDetail(data);
      }
      setLoading(false);
    }

  const { id, title, userAccount, storeName, amount, evId, evHash, txHash, createTime, blockHeight, } = zxlDetail || {};

  const bradgeTime = useMemo(()=>{
    if(createTime){
      // const time = new Date(createTime),
      //       year = time.getFullYear(),
      //       month = time.getMonth() + 1,
      //       day = time.getDate();
      // return `${year}年${month}月${day}日`
      return createTime.split(' ')[0].replace('-', '年').replace('-', '月')+'日';
    }
  },[createTime])

   return (<>
     <div className={styles.zxinChainWrapper} onClick={(e)=>e.stopPropagation()}>
          <p className={styles.idBox}>存证ID：{evId}</p>
          <h5>存证信息</h5>
          <div className={styles.infoBox}>
            <p>信息类标：{title}</p>
            <p>还款方：{userAccount}</p>
            <p>收款方：{storeName}</p>
            <p>金额：{formatAmount(amount)} 元</p>
            <p>状态：已结清</p>
          </div>
          <h5>存证摘要</h5>
          <div className={styles.infoBox}>
            <p style={{display:"flex"}}>
              <span style={{width:"102px"}}>电子存证hash：</span>
              <span style={{flex: 1, wordBreak:'break-word'}}>{evHash}</span>
            </p>
            <p style={{display:"flex"}}>
              <span style={{width:"116px"}}>至信链交易hash：</span>
              <span style={{flex: 1, wordBreak:'break-word'}}>{txHash}</span>
            </p>
            <p>可信存正时间：{createTime}</p>
            <p>区块高度：{blockHeight}</p>
            <p>可查数据地址：https://www.zxinchain.com/evidence</p>
          </div>
          <div className={styles.imgBox}>
            <div className={styles.qrCodeBox}>
              <QRCode value={`${window.location.origin}/?id=${id}#/blank/zxinchain`} size={104} />
              <span>扫码查看在线证书</span>
            </div>
            <div className={styles.bradgeBox}>
              <img src="https://imgniu.zhaojiafang.com/front-web/zxlBradge.png" alt="" />
              <span>{bradgeTime}</span>
            </div>
          </div>
          <span className={styles.footerDesc}>信息永久受区块链保护，任何人无法篡改</span>
        </div>
        <CommonLoading loading={loading} />
   </>)
}

export default ZhiXinChain;